<template>
  <div class="hot-sale">
    <div class="title" v-if="tagList">
      <span>{{ tagList[0].title }}</span>
      <div class="more-prod-cont" @click="toClassifyPage()">
        <span class="more">更多</span>
        <span class="arrow"></span>
      </div>
    </div>
    <div class="hotsale-item-cont">
      <dl class="prod-items" v-for="(item, index) in hotList" :key="index" @click="ToProd(item.prodId)">
        <dt class="hot-imagecont">
          <img :src="item.pic" alt="" class="hotsaleimg" />
        </dt>
        <dd class="hot-text">
          <div class="hotprod-text">{{ item.prodName }}</div>
          <div class="prod-info">{{ item.brief }}</div>
          <div class="prod-text-info">
            <div class="price">
              <span class="symbol">￥</span>
              <span class="big-num">{{
                item.price.toString().split(".")[0]
              }}</span>
              <span class="small-num">{{
                item.price.toString().split(".")[1]
                  ? "." + item.price.toString().split(".")[1]
                  : ".00"
              }}</span>
            </div>
            <img
              src="../../static/images/tabbar/basket-sel.png"
              alt=""
              class="basket-img"
            />
          </div>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  props: ["tagList"],
  computed: {
    ...mapState({
      hotList: (state) => state.home.hotList,
    }),
  },
  methods: {
    ...mapActions({
      homeHotList: "home/homeHotList",
    }),
    toClassifyPage() {
      wx.navigateTo({
        url: `/pages/prod-classify/index?sts=0&tagid=${this.tagList[0].id}&title=${this.tagList[0].title}`,
      });
      wx.setNavigationBarTitle({ title: this.tagList[0].title });
    },
    ToProd(id) {
      // console.log(id);
      wx.navigateTo({
        url: `/pages/prod/prod?detailsId=${id}`
      })
    }
  },
  mounted() {
    this.homeHotList({ tagId: 2, size: 6 });
  },
};
</script>

<style scoped>
.arrow {
  width: 15rpx;
  height: 15rpx;
  border-top: 3rpx solid #686868;
  border-right: 3rpx solid #686868;
  transform: rotate(45deg);
  position: absolute;
  right: 30rpx;
  top: 34rpx;
}
.title {
  position: relative;
  height: 64rpx;
  line-height: 64rpx;
  font-size: 32rpx;
  padding: 40rpx 0 10rpx 30rpx;
  color: #333;
  background: #fff;
}
.hotsale-item-cont {
  padding-bottom: 20rpx;
  background: #fff;
}
.title .more-prod-cont .more {
  position: absolute;
  right: 30rpx;
  top: 48rpx;
  color: #666;
  font-size: 24rpx;
  padding: 0 20rpx;
  height: 44rpx;
  line-height: 44rpx;
}
.more-prod-cont {
  color: #999;
  display: inline-block;
  text-align: right;
}

.title .more-prod-cont .arrow {
  top: 58rpx;
  right: 30rpx;
  border-top: 2rpx solid #666;
  border-right: 2rpx solid #666;
}
.hot-sale .prod-items:nth-child(2n-1) {
  margin: 20rpx 10rpx 10rpx 20rpx;
}
.prod-items {
  width: 345rpx;
  display: inline-block;
  background: #fff;
  padding-bottom: 20rpx;
  box-sizing: border-box;
  box-shadow: 0rpx 6rpx 8rpx rgba(58, 134, 185, 0.2);
}
.hot-imagecont {
  font-size: 0;
  text-align: center;
}
.prod-items .hot-imagecont .hotsaleimg {
  width: 341rpx;
  height: 341rpx;
}
image {
  width: 320px;
  height: 240px;
  display: inline-block;
  overflow: hidden;
}
.prod-items .hot-text {
  margin-top: 20rpx;
  padding: 0 10rpx;
}
.prod-items .hot-text .hotprod-text {
  font-size: 28rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prod-items .hot-text .prod-info,
.more-prod .prod-text-right .prod-info {
  font-size: 22rpx;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prod-text-info {
  position: relative;
  height: 70rpx;
  line-height: 70rpx;
  font-family: Arial;
}
.price {
  font-family: Arial;
  display: inline-block;
  color: #eb2444;
  padding-bottom: 10rpx;
  padding-left: 10rpx;
}
.symbol {
  font-size: 24rpx;
}
.big-num {
  font-size: 32rpx;
}
.small-num {
  font-size: 24rpx;
}
.prod-items .hot-text .prod-text-info .basket-img {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  right: 0;
  bottom: 7rpx;
  padding: 8rpx;
}
</style>